<template>
    <div>
        <ul class="fillList">
            <li class="fillItem">
                <span class="itemName font28">个人卖家</span>
                <span class="check_circle">单位</span>
                <span class="check_circle checkOn">个人/非企业单位</span>
            </li>
            <li class="fillItem require">
                <span class="itemName font28">公司抬头</span>
                <input class="itemValue font28" placeholder="请输入公司名称"  value="">
            </li>
            <li class="fillItem require">
                <span class="itemName font28">公司税号</span>
                <input class="itemValue font28" placeholder="请输入公司税号"  value="">
            </li>
            <li class="fillItem">
                <span class="itemName font28">公司地址</span>
                <input class="itemValue font28" placeholder="请输入公司地址"  value="">
            </li>
            <li class="fillItem">
                <span class="itemName font28">公司电话</span>
                <input class="itemValue font28" placeholder="请输入公司电话"  value="">
            </li>
            <li class="fillItem arrow">
                <span class="itemName font28">开户银行</span>
                <select class="itemSelect font28">
                    <option value="1">中国银行</option>
                    <option value="2">工商银行</option>
                </select>
            </li>
            <li class="fillItem">
                <span class="itemName font28">开户账号</span>
                <input class="itemValue font28" placeholder="请输入开户账号"  value="">
            </li>
        </ul>
        <!-- 对公账户 -->
        <ul class="fillList">
            <li class="pad24 color92 bgf0 font24"></li>
            <li class="fillItem">
                <span class="itemName font28">发票金额</span>
                <input class="itemValue font28" placeholder="发票金额"  value="">
            </li>
        </ul>
        <ul class="fillList">
            <li class="pad24 color92 bgf0 font24">接收方式（选择一项）</li>
            <li class="fillItem">
                <span class="itemName font28">电子邮箱</span>
                <input class="itemValue font28" placeholder="请输入电子邮箱"  value="">
            </li>
            <li class="fillItem">
                <span class="itemName font28">手机号码</span>
                <input class="itemValue font28" placeholder="请输入手机号码"  value="">
            </li>
        </ul>
    </div>
</template>
<style lang="scss" scoped>
    .fillList{ background-color: #fff;
        .fillItem{ position: relative; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; align-items: center; padding: 0.5rem 4%;
            .itemName{ color: #333;}
            .itemValue{ max-width:68%; text-align: right; background: transparent; border: none; outline: none; color: #929292; line-height: normal;
                &::-webkit-input-placeholder{ color: #929292;}
            }
            input.itemValue{ padding: 0;}
            &.require::before{ display: block; content: '*'; position: absolute; left: 2.4%; top: 50%; margin-top: -0.2rem; font-size: 0.7rem; color: #ff0000; 
                
            }
            // .posIcon{ position: relative;  padding-left: 1.2rem; 
            //         &:before{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; content: ''; width: 1rem; height: 1rem; background: url(../images/posIcon.png) no-repeat; background-size: cover; margin-right: 0.5rem;} 
            // }
            // .collageIcon{ position: relative;  padding-left: 1.2rem; 
            //         &:before{ position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; content: ''; width: 1rem; height: 1rem; background: url(../images/icon/collageIcon.png) no-repeat; background-size: cover; margin-right: 0.5rem;} 
            // }
            // .clear{ display: none; background: url(../images/icon_clear.png) no-repeat; background-size: cover; width: 0.8rem; height: 0.8rem;
            //     &.hasValue{ display: block;}
            // }
            &.arrow .itemValue{ padding-right: 1rem; border: none; width: 65%; text-align: right;}
            &.arrow:before{ content: ''; position: absolute; top: 48%; right: 2.4%; width: 0.5rem; height: 0.5rem; border-top: 1px solid #929292; border-right: 1px solid #929292; transform: rotate(45deg) translateX(-50%); -webkit-transform: rotate(45deg) translateX(-50%);}
            .areaValue{ width: 100%; line-height: 1.5; resize: none; background: transparent; outline: none; color: #929292; border: 1px solid #ccc;
                &.borderN{ border: none; }
                &::-webkit-input-placeholder{ color: #929292;}
            }
            .itemSelect{ position: relative; background-color: transparent; border: none; outline: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; padding-right: 1rem; /*background: url("../images/icon/arrow.png") no-repeat scroll right center transparent;*/ background-size: contain; color: #999; direction: rtl; -webkit-direction: rtl; line-height: normal;
                &.selected{ color: #e5e5e5;}
            }
            // .check{ position: absolute; right: 2.4%; top: 50%; display: block; margin-top: -0.51rem; width: 1.02rem; height: 1.02rem; background: url(../images/check.png) no-repeat; background-size: 2.04rem 1.02rem; background-position: -1.02rem 0;
            //     &.checkOn{ background-position: 0 0;}
            // }
            // .check_circle{ position: relative; padding-left: 7.2%; font-size: 0.6rem;
            //     &:before{ position: absolute; left: 0; top: 50%; content: ''; display: block; margin-top: -0.51rem; width: 1.02rem; height: 1.02rem; background: url(../images/check_circle.png) no-repeat; background-size: 2.04rem 1.02rem;}
            //     &.checkOn{
            //         &:before{ background-position: -1.02rem 0;}
            //     }
            // }
            // .up{ position: absolute; right: 2.4%; top: 50%; display: block; margin-top: -0.51rem; width: 1.02rem; height: 1.02rem; background: url(../images/updown.png); background-size: 2.04rem 1.02rem; background-position: -1.02rem 0;
            //     &.down{ background-position: 0 0;}
            // }
            &+.fillItem:after{content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #E5E5E5; color: #E5E5E5; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);/*  left: 2.4%; */}
        }
    }
</style>